// 页面加载时自动查询评论
window.addEventListener('load', function () {
    fetch('indexold.php')
      .then(response => response.json())
      .then(data => {
            localStorage.setItem('comments', JSON.stringify(data));
        })
      .catch(error => console.error('Error fetching comments on load:', error));
});

function showInput() {
    const input = document.getElementById('commentInput');
    const button = document.getElementById('commentButton');
    const commentsDisplay = document.getElementById('commentsDisplay');

    if (input.style.display === 'none' || input.style.display === '') {
        input.style.display = 'block';
        button.innerHTML = '提交';
        button.onclick = function () {
            const comment = input.value;
            if (comment.trim()!== '') {
                // 发送请求到服务器进行插入操作
                fetch('indexold.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `homecomment=${encodeURIComponent(comment)}`
                })
                  .then(response => response.text())
                  .then(data => {
                        console.log(data);
                        // 插入成功后重新查询评论
                        fetch('indexold.php')
                          .then(response => response.json())
                          .then(data => {
                                localStorage.setItem('comments', JSON.stringify(data));
                                displayComments();
                            })
                          .catch(error => console.error('Error fetching comments after insert:', error));
                    })
                  .catch(error => console.error('Error submitting comment:', error));
            }
            input.value = '';
            input.style.display = 'none';
            button.innerHTML = '评论';
            button.onclick = showInput;
            if (comment.trim() === '') {
                commentsDisplay.style.display = 'none'; // 输入空白内容时隐藏评论列表
            }
        };
        // 点击评论时从本地存储中获取评论并展示
        displayComments();
        commentsDisplay.style.display = 'block';
    } else {
        input.style.display = 'none';
        button.innerHTML = '评论';
        button.onclick = showInput;
        commentsDisplay.style.display = 'none'; // 收起输入框时隐藏评论列表
    }
}

function handleKeyDown(event) {
    const input = document.getElementById('commentInput');
    const button = document.getElementById('commentButton');
    const commentsDisplay = document.getElementById('commentsDisplay');
    if (event.key === 'Enter' && input.style.display === 'block') {
        const comment = input.value;
        if (comment.trim()!== '') {
            // 发送请求到服务器进行插入操作
            fetch('indexold.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `homecomment=${encodeURIComponent(comment)}`
            })
              .then(response => response.text())
              .then(data => {
                    console.log(data);
                    // 插入成功后重新查询评论
                    fetch('indexold.php')
                      .then(response => response.json())
                      .then(data => {
                            localStorage.setItem('comments', JSON.stringify(data));
                            displayComments();
                        })
                      .catch(error => console.error('Error fetching comments after insert:', error));
                })
              .catch(error => console.error('Error submitting comment:', error));
        }
        input.value = '';
        input.style.display = 'none';
        button.innerHTML = '评论';
        button.onclick = showInput;
        if (comment.trim() === '') {
            commentsDisplay.style.display = 'none'; // 输入空白内容时隐藏评论列表
        }
    }
}

function displayComments() {
    const comments = JSON.parse(localStorage.getItem('comments'));
    if (comments) {
        const commentsDisplay = document.getElementById('commentsDisplay');
        commentsDisplay.innerHTML = ''; // 清空之前的评论
        comments.forEach(comment => {
            const commentElement = document.createElement('p');
            commentElement.textContent = `ID: ${comment.id}, 姓名: ${comment.name}, 评论: ${comment.homecomment}`;
            commentsDisplay.appendChild(commentElement);
        });
    }
}